<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布房源-基本信息</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/css/issuehouse.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    <link rel="icon" th:href="@{airent/common/imgs/icon.ico}" type="images/x-ico}"/>


    <!-- kartik-v-bootstrap -->
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/css/fileinput.min.css}"
          type="text/css">
    <link rel="stylesheet"
          th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.css}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">


</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light " id="nav">

        <div class="collapse navbar-collapse col-md-10 offset-md-1 animate__animated  animate__zoomIn"
             id="navbarSupportedContent">
            <a id="logo-img" class="navbar-brand" href="index.html">
                <img alt="Brand" src="airent/common/imgs/logo_small.png">
            </a>
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a id="select-city" class="nav-link" href="selectcity.html">
                        <svg id="city-icon" class="bi bi-building" width="1em"
                             height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M15.285.089A.5.5 0 0 1 15.5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5H1a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .418-.493l5.582-.93V3.5a.5.5 0 0 1 .324-.468l8-3a.5.5 0 0 1 .46.057zM7.5 3.846V8.5a.5.5 0 0 1-.418.493l-5.582.93V15h8v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.222l-7 2.624z"/>
                            <path fill-rule="evenodd" d="M6.5 15.5v-7h1v7h-1z"/>
                            <path
                                    d="M2.5 11h1v1h-1v-1zm2 0h1v1h-1v-1zm-2 2h1v1h-1v-1zm2 0h1v1h-1v-1zm6-10h1v1h-1V3zm2 0h1v1h-1V3zm-4 2h1v1h-1V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm-2 2h1v1h-1V7zm2 0h1v1h-1V7zm-4 0h1v1h-1V7zm0 2h1v1h-1V9zm2 0h1v1h-1V9zm2 0h1v1h-1V9zm-4 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1z"/>
                        </svg>
                        <span id="cityname">选择城市</span>
                    </a>
                </li>
            </ul>
            <ul class="navbar-nav mr-5 ">
                <li class="nav-item">
                    <a class="nav-link" href="../view/searchhouse.html">租房</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../view/issuehouse.html">发布房源</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../view/roomate.html">寻找室友</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../view/PriceTrendChart.html">房价走势</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        指南
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="Agreement.html">用户协议</a>
                        <a class="dropdown-item" href="Potplayer.html">隐私政策</a>
                        <a class="dropdown-item" href="Commitment.html">服务承诺</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="about.html">关于我们</a>
                    </div>
                </li>
            </ul>
            <!-- <a href="login_register.html" id="login-button" class="btn btn-outline-success active animate__animated animate__pulse"
              role="button" aria-pressed="true">登录/注册</a> -->
            <!-- <a href="register.html" id="register-button"
              class="btn btn-outline-success active animate__animated animate__pulse" role="button" aria-pressed="true">注册</a> -->
            <div class="user-message">
                <a href="user.html" class="user-head"><img id="user-img" src="../imgs/userimg.jpg" alt="用户头像"></a>
                <a href="user.html" class="user-name">用户名/手机号</a>
            </div>
        </div>
    </nav>

    <!-- 发布房源 - 开始 -->
    <div class="issuehouse">

        <div class="big-tit">
            <div class="tit">发布出售房源</div>
            <div class="sub-tit">填写信息，Airent会尽快与您取得联系</div>
        </div>
        <div id="step-item-one" style="display: block;">
            <div class="inside-item">
                <div class="item-one" style="color: #01bc6a; border-bottom: 2px solid #01bc6a;">1.提交基本信息</div>
                <div class="item-two">2.提交详细信息</div>
            </div>
        </div>

        <div id="step-item-two" style="display: none;">
            <div class="inside-item">
                <div class="item-one">1.提交基本信息</div>
                <div class="item-two" style="color: #01bc6a; border-bottom: 2px solid #01bc6a;">2.提交详细信息</div>
            </div>
        </div>


        <div class="m-form">
            <!-- 第一个表单 - 开始 -->
            <div id="form-box-one" style="display: block;">
                <div class="midd-box">
                    <div class="row">
                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">姓名:</label>
                                    <input type="text" class="form-control all-input" v-model="name"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">手机号:</label>
                                    <input type="text" class="form-control all-input" v-model="tel"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">选择城市:</label>
                                    <select class="form-control all-input" v-model="city">
                                        <option value="苏州">苏州</option>
                                        <option value="无锡">无锡</option>
                                        <option value="上海">上海</option>
                                        <option value="南京">南京</option>
                                    </select>
                                    <label for="usr" class="label-cha">选择地区:</label>
                                    <select class="form-control all-input" v-model="area">
                                        <option value="苏州">苏州</option>
                                        <option value="无锡">无锡</option>
                                        <option value="上海">上海</option>
                                        <option value="南京">南京</option>
                                    </select>

                                    做省市级联，选择省后显示对应的地区
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">小区名称:</label>
                                    <input type="text" class="form-control all-input" v-model="villageName"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">


                            <form class="form-inline">
                                <div class="form-group" @change="adress">
                                    {{detailedAddress}}
                                    <label for="usr" class="label-cha">具体门牌号:</label>
                                    <input type="text" class="form-control all-input" v-model="dong"
                                           style="width: 100px;">
                                    <label for="usr" style="margin-right: 5px;">栋/幢</label>
                                    <input type="text" class="form-control all-input" v-model="danyuan"
                                           style="width: 100px;">
                                    <label for="usr" style="margin-right: 5px;">单元</label>
                                    <input type="text" class="form-control all-input" v-model="shi"
                                           style="width: 100px;">
                                    <label for="usr" style="margin-right: 5px;">室</label>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">出租类型:</label>
                                    <select class="form-control all-input" v-model="rentType">
                                        <option value="合租">合租</option>
                                        <option value="整租">整组</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">押付方式:</label>
                                    <select class="form-control all-input" v-model="payment">
                                        <option value="0">不需要押金</option>
                                        <option value="1">押一付一</option>
                                        <option value="2">押一付二</option>
                                        <option value="3">押一付三</option>
                                        <option value="4">其他</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">期望租金:</label>
                                    <input type="text" class="form-control all-input" v-model="price" placeholder="单位：元"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="m-submit">
                    <div class="submit-wrap">
                        <button type="button" id="showHidde_one" class="btn btn-success btn-lg">下一步</a></button>
                    </div>
                </div>
            </div>
            <!-- 第一个表单 - 结束 -->

            <!-- 第二个表单 - 开始 -->
            <div id="form-box-two" style="display: none;">
                <div class="midd-box">
                    <div class="row">
                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房源标题:</label>
                                    <input type="text" class="form-control all-input" v-model="houseResource"
                                           placeholder="" style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房屋面积:</label>
                                    <input type="text" class="form-control all-input" v-model="houseMeasure"
                                           placeholder="单位：m^2" style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group" @change="selectHouseType">
                                    {{houseType}}
                                    <label for="usr" class="label-cha">户型:</label>
                                    <input type="text" class="form-control all-input" v-model="house_s"
                                           style="width: 100px;">
                                    <label for="usr" style="margin-right: 5px;">室</label>
                                    <input type="text" class="form-control all-input" v-model="house_t"
                                           style="width: 100px;">
                                    <label for="usr" style="margin-right: 5px;">厅</label>
                                    <input type="text" class="form-control all-input" v-model="house_w"
                                           style="width: 100px;">
                                    <label for="usr">卫</label>
                                    <input type="hidden" >
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">楼层:</label>
                                    <input type="text" class="form-control all-input" v-model="floor"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>


                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">屋间朝向:</label>
                                    <select class="form-control all-input" v-model="orientation">
                                        <option value="东">东</option>
                                        <option value="西">西</option>
                                        <option value="南">南</option>
                                        <option value="北">北</option>
                                        <option>无窗</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">有无电梯</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" v-model:name="elvator"
                                               id="inlineRadio1" value="1">
                                        <label class="form-check-label" for="inlineRadio1">有</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" v-model:name="elvator"
                                               id="inlineRadio2" value="0">
                                        <label class="form-check-label" for="inlineRadio2">无</label>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房源设备</label>
                                    <div class="form-check form-check-inline" v-for="item in items"
                                         v-if="item.itemName!='电梯'">
                                        <input class="form-check-input" type="checkbox" v-bind:id="'item'+item.itemId"
                                               v-model="itemsCollection"
                                               v-bind:value="item.itemId">
                                        <label class="form-check-label" v-bind:for="'item'+item.itemId">{{item.itemName}}</label>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">额外费用</label>
                                    <div class="form-check form-check-inline" v-for="extra in extras">
                                        <input class="form-check-input" type="checkbox"
                                               v-bind:id="'extra'+extra.extraId" v-model="extrasCollection"
                                               v-bind:value="extra.extraId">
                                        <label class="form-check-label" v-bind:for="'extra'+extra.extraId">{{extra.extraName}}</label>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">起租日期:</label>
                                    <input type="date" class="form-control all-input" v-model="date" id="usr"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="comment" class="label-cha">房源描述:</label>
                                    <textarea class="form-control all-input" rows="5" id="comment" v-model="content"
                                              style="width: 300px;"></textarea>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            {{imgPath}}
                            <form enctype="multipart/form-data" action="/house/addImg" method="post">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房源照片:</label>
                                    <div class="file-loading">
                                        <input id="input-703" name="imgs" type="file" multiple>
                                    </div>
                                </div>

                            </form>

                        </div>

                    </div>
                </div>

                <div class="m-submit">
                    <div class="submit-wrap">
                        <button type="button" id="showHidde_two" class="btn btn-success btn-lg">上一步</a></button>
                        <!-- <button type="button" class="btn btn-success btn-lg">提交委托</button> -->

                        <button type="button" @click="addHoues" class="btn btn-success btn-lg" data-toggle="modal"
                                data-target="#exampleModalCenter">
                            提交委托
                        </button>

                        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalCenterTitle">提交成功</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body" style="font-size: 20px;">
                                        请继续浏览Airent
                                    </div>
                                    <div class="modal-footer">
                                        <!-- <button type="button" class="btn btn-secondary " data-dismiss="modal">关闭</button> -->
                                        <button type="button" class="btn btn-primary"
                                                style="background-color: #01bc6a; border: #01bc6a;"><a
                                                href="../view/index.html">Airent</a></button>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>

            <!-- 第二个表单 - 结束 -->
        </div>
    </div>
    <!-- 发布房源 - 结束 -->

    <!-- 底部 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 3-1 第一列 -->
            <div class="title">
                <div class="fl">
                    <ul class="nav nav-tabs">
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li><a href="#">隐私声明</a></li>
                        <li><a href="#">网站地址</a></li>
                        <li><a href="#">友情链接</a></li>
                    </ul>
                </div>
                <div class="fr">
                    客服电话 ：0101 0101
                </div>
            </div>

            <!-- 3-2 第二列 -->
            <div class="middle-box">
                <div class="mid-up">
                    <div class="tele-logo"></div>
                    <div class="tele-word">
                        留言给Airent:
                    </div>
                    <div class="tele-num">
                        12123321@123.com
                    </div>
                </div>
                <div class="mid-down">
                    <div class="dizhi">
                        地理位置<br>
                        苏州市工业园区新平街388号腾飞创新园14号楼<br>
                        邮编：215000
                    </div>
                </div>
            </div>

            <!-- 3-3 第三列 -->
            <div class="bottom">
                <div class="copyright">
                    airen有限公司 | 2020airent网版权所有 | 营业执照<br>
                    违法举报电话 ：0101 0101 违法和不良信息举报邮箱 ：384905931@qq.com
                </div>
                <div class="copybottom">
                    网上有害信息举报专区
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/piexif.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/sortable.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/purify.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
<!--<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/fileinput.min.js}"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/LANG.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/zh.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>


<script>

    var vueApp = new Vue({
        el: "#app",
        data: {
            // name: "",
            tel: "",//预留电话
            province: "",//所在省
            city: "",//所在城市
            area: "",//所在地区
            villageName: "",//小区名字
            detailedAddress: "",
            rentType: "",//住房类型（合租/整租）
            price: 0,//价格
            dong: "",//栋
            danyuan: "",//单元
            shi: "",//室
            houseCoordinateX: "",//x坐标
            houseCoordinateY: "",//y坐标
            orientation: "",//房屋朝向
            items: [],//房屋设施
            extras: [],//缴费
            floor: "",//楼层
            house_s: "",//室
            house_t: "",//厅
            house_w: "",//卫
            houseType: '',
            houseMeasure: "",//面积
            houseResource: "",//标题
            metro: "",
            elvator:3,
            itemsCollection: [],
            extrasCollection: [],
            date: "",
            imgs: [],//上传图片,
            imgPath:[],
            content:'',//房源描述
            payment:'',//押付方式
        },
        methods: {
            addHoues: function () {
                let url = '/house/issueHouse',
                    data = {
                        tel: vueApp.tel,//预留电话
                        houseCity: this.city,
                        houseArea: this.area,
                        villageName: this.villageName,//小区名字
                        detailedAddress: this.detailedAddress,//所在单元,需要写个计算方法
                        rentType: this.rentType,//住房类型（合租/整租）
                        rentPrice: this.price,//价格
                        houseCoordinateX: this.houseCoordinateX,//x坐标
                        houseCoordinateY: this.houseCoordinateY,//y坐标
                        orientation: this.orientation,//房屋朝向
                        floor: this.floor,//楼层
                        houseType: this.houseType,
                        houseMeasure: this.houseMeasure,//面积
                        houseResource: this.houseResource,//标题
                        itemsCollection: this.itemsCollection,
                        extrasCollection: this.extrasCollection,
                        date: this.date,
                        imgsPath:this.imgPath,
                        content:this.content,
                        elvator:this.elvator,
                        payment:this.payment

                    }
                $.post(url, data, function (result) {
                    alert(result)
                }, "json")
            },
            addImgs: function () {
                var formData = new FormData();

                var pic = document.getElementById("goodsDetailPic").files;

                for(var j=0;j<pic.length;j++){
                    formData.append('goodsPhoto[]',pic[j]);

                }
            },

        },
        computed:{
            adress:function () {
                this.detailedAddress = this.dong+'栋'+this.danyuan+'单元'+this.shi+'室'
                let s = this.detailedAddress.substring(0,1)
                while(s == '栋'||s=='单'||s=='室'||s=='元'){
                    this.detailedAddress = this.detailedAddress.substring(1,this.detailedAddress.length)
                    s = this.detailedAddress.substring(0,1)
                }

                return this.detailedAddress
            },
            selectHouseType:function () {
                this.houseType= this.house_s + "室" + this.house_t + "厅" + this.house_w + "卫"
                return this.houseType
            }
        },
        created() {
            let _this = this
            let url1 = '/items/showHouseItems'
            let url2 = '/extra/showHouseExtra'
            //查询所有的设施
            $.get(url1, '', function (data) {
                _this.items = data
            })
            // 查询所有缴费
            $.get(url2, function (data) {
                _this.extras = data
            })
        }


    })
</script>
<!-- div切换的js -->
<script type="text/javascript">
    function show_hidden(obj) {

        if (obj.style.display == "block") {
            obj.style.display = "none";
        } else {
            obj.style.display = "block";
        }
    }

    var sh1 = document.getElementById("showHidde_one");
    var sh2 = document.getElementById("showHidde_two");

    sh1.onclick = function () {

        var div1 = document.getElementById("form-box-one");
        var div2 = document.getElementById("form-box-two");

        var biao1 = document.getElementById("step-item-one");
        var biao2 = document.getElementById("step-item-two");


        show_hidden(div1);
        show_hidden(div2);

        show_hidden(biao1);
        show_hidden(biao2);
        return false;
    }

    sh2.onclick = function () {

        var div1 = document.getElementById("form-box-one");
        var div2 = document.getElementById("form-box-two");

        var biao1 = document.getElementById("step-item-one");
        var biao2 = document.getElementById("step-item-two");

        show_hidden(div1);
        show_hidden(div2);

        show_hidden(biao1);
        show_hidden(biao2);
        return false;
    }


</script>

<script>

    $(document).ready(function () {
        $("#input-703").fileinput({
                theme: 'fas',
                language: 'zh',
                uploadUrl: "/house/upload", // 服务器端上传处理程序
                /*minFileCount: 1, //最小上传文件数为1
                maxFileCount: 5, //最大上传文件数为5
                multiple: false, //异步上传*/
                // uploadAsync: false,
                // showUpload : false
                // showUpload: true, //是否显示上传按钮
                // showRemove : true, //显示移除按钮
                // showPreview : true, //是否显示预览
                // showCaption: false,//是否显示标题
                // autoReplace : true,
                minFileCount: 0,
                uploadAsync: true,
                maxFileCount: 10,//最大上传数量
                browseOnZoneClick: true,
                msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                enctype: 'multipart/form-data',
                // overwriteInitial: false,//不覆盖已上传的图片
                allowedFileExtensions : [ "jpg", "png", "gif" ],
                browseClass : "btn btn-primary", //按钮样式
                previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
                layoutTemplates :{
                    actionDelete:'', //去除上传预览的缩略图中的删除图标
                    // actionUpload:'',//去除上传预览缩略图中的上传图片；
                    actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
                },
            },

        )
    }).on('fileuploaded', function (event, data, previewId, index) {//异步上传成功结果处理
        //图片路径 data.response.success
        // vueApp.imgPath=data.response.success
        addPath(data.response.success)
    }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    })


    function addPath(path) {
        let list = vueApp.imgPath
        list.push(path)
        vueApp.imgPath = list
    }

</script>
</body>
</html>
